<template>
  <div class="line-search">
    <div class="title">
      <div class="name">轨迹回放</div>
      <div class="icon"><i class="el-icon-close" @click="close"></i></div>
    </div>

    <el-date-picker
      v-model="timeRange"
      type="datetimerange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd HH:mm:ss"
    >
    </el-date-picker>
    <div class="button-list">
      <el-button type="primary" size="small" @click="handleSubmit"
        >查询轨迹</el-button
      >
      <el-button type="primary" size="small" @click="handleCancel"
        >清空显示</el-button
      >
    </div>
  </div>
</template>

<script>
import { getApraList } from "@/api/apra";
export default {
  props: {
    map: {
      default: () => {},
    },
  },
  data() {
    return {
      timeRange: [],
    };
  },
  methods: {
    handleSubmit() {
      if (this.timeRange.length < 2) {
        this.$message.warning("请完整选择查看的时间");
        return;
      }
      const initTime = (time) => {
        let data = +new Date(time);
        return parseInt(data / 1000);
      };
      const time = {
        startTime: initTime(this.timeRange[0]),
        endTime: initTime(this.timeRange[1]),
      };
      getApraList(time).then(({ data }) => {
        // console.log("data: ", data);
        this.$emit("showLine", data);
      });
    },
    handleCancel() {
      this.$emit("closeLine");
    },
    close() {
      this.$emit("close");
    },
  },
};
</script>

<style scoped lang="scss">
.line-search {
  background-color: #fff;
  position: absolute;
  top: 90px;
  left: 20px;
  padding: 20px;
  border-radius: 3px;
  .title {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    .title {
      width: calc(100% - 20px);
    }
    .icon {
      width: 20px;
      text-align: right;
      i {
        font-size: 16px;
        cursor: pointer;
      }
    }
  }
  .button-list {
    margin-top: 20px;
    line-height: 40px;
  }
}
</style>
